<template>
  <div class="report-form">
    <div>
      <div class="page__header">
        <button class="page__header-btn-back" @click="$router.go(-1)"></button>
        能源换电日报专题
        <div class="jump" @click="jump()"><span class="jump__icon"></span>报表</div>
      </div>
    </div>
    <div class="page__main bg-white">
      <div class="page__scroller" ref="main">
        <div class="account-main">
          <div class="title-bg" id="headTitle">
            {{showDate}}能源换电日报专题
          </div>
          <van-sticky :offset-top="46">
            <div style="background: #f4f4f4;">
              <div class="top-menu">
                <span class="top-menu__menu" @click="menus.show = true">目录</span>
              </div>
              <div class="pd-aside bg-white">
                <div class="selects">
                  <div class="selects__item selects__item--date" @click="chooseDate">
                    {{datePicker.showData}}
                  </div>
                  <div class="selects__item selects__item--province" @click="chooseCity('province')">
                    {{areaInfo.showArea}}
                  </div>
                  <div class="selects__item selects__item--city" @click="chooseCity('city')">
                    {{cityInfo.showArea}}
                  </div>
                </div>
              </div>
            </div>
          </van-sticky>
          <!--用户发展-->
          <div class="box bg-white mgb-10" style="margin-top: 15px">
            <div id="a" class="report-title">
              <i class="report-title__num"><span>1</span></i>
              用户发展
              <button type="button" class="helpBtn" @click="handleTipDialogShow('a')"></button>
            </div>
            <div class="register">
              <div class="register--box" v-for="(item, index) in register.data" :key="index" :class="register.active == item.idCode ? 'register--box--current' : ''"
                   @click="handleTypeChange(1,item.idCode,item.name,item.unit)">
                <div style="float: left"><span class="register--box__btn"></span></div>
                <span class="register--box__title">{{item.name}}</span>
                <span class="register--box__num"><span style="font-weight: bolder;font-size:18px;">{{numFormat(item.value)}}</span>{{item.unit}}</span>
              </div>
            </div>
            <div class="report-title" style="padding-top: 8px">
              本日：
            </div>
            <div class="register">
              <div class="register--daybox" v-for="(item, index) in register.dayData" :key="index" :class="register.active == item.idCode ? 'register--box--current' : ''"
                   @click="handleTypeChange(1,item.idCode,item.name,item.unit)">
                <div style="float: left"><span class="register--box__btn"></span></div>
                <span class="register--box__title">{{item.name}}</span>
                <span class="register--box__num"><span style="font-weight: bolder;font-size:18px;">{{numFormat(item.value)}}</span>{{item.unit}}</span>
              </div>
            </div>
            <div class="report-title" style="padding-top: 8px">
              本月：
            </div>
            <div class="register">
              <div class="register--monbox" v-for="(item, index) in register.monData" :key="index" :class="register.active == item.idCode ? 'register--box--current' : ''"
                   @click="handleTypeChange(1,item.idCode,item.name,item.unit)">
                <div style="float: left"><span class="register--box__btn"></span></div>
                <span class="register--box__title">{{item.name}}</span>
                <span class="register--box__num"><span style="font-weight: bolder;font-size:18px;">{{numFormat(item.value)}}</span>{{item.unit}}</span>
              </div>
            </div>
            <div class="report-title" style="padding-top: 8px">
              本年：
            </div>
            <div class="register">
              <div class="register--yearbox" v-for="(item, index) in register.yearData" :key="index" :class="register.active == item.idCode ? 'register--box--current' : ''"
                   @click="handleTypeChange(1,item.idCode,item.name,item.unit)">
                <div style="float: left"><span class="register--box__btn"></span></div>
                <span class="register--box__title">{{item.name}}</span>
                <span class="register--box__num"><span style="font-weight: bolder;font-size:18px;">{{numFormat(item.value)}}</span>{{item.unit}}</span>
              </div>
            </div>
            <div class="charbar1" v-if="showCharBar">
              <div style="height: 20px">
                <span class="register_icon_label1"></span>
                <span class="register_icon_title">{{ register.titleName }}</span>
              </div>
              <van-tabs class="init-tabs mgb-15" @change="handleTabClick">
                <van-tab name="registerUserA" title="整体情况" v-if="titleShow">
                  <div class="chart-wrap">
                    <BarChartScroll :data="registerUser.barData"></BarChartScroll>
                    <div class="chart-wrap__loading" v-show="registerUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="registerUserB" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="registerUser.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="registerUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </div>
          <div class="back_line" ></div>
          <!--运营效率-->
          <div class="box bg-white mgb-10" style="margin-top: 10px;">
            <div id="b" class="report-title">
              <i class="report-title__num"><span>2</span></i>
              运营效率
              <button type="button" class="helpBtn" @click="handleTipDialogShow('b')"></button>
            </div>
            <div class="operate">
              <div class="operate--box" v-for="(item, index) in operate.data" :key="index" :class="operate.active == item.idCode ? 'operate--box--current' : ''"
                   @click="handleTypeChange(2,item.idCode,item.name,item.unit)">
                <p class="operate--box__title">{{item.name}}</p>
                <p class="operate--box__num" ><span style="font-weight: bolder">{{numFormat(item.value)}}</span>{{item.unit}}</p>
                <p class="operate--box__hb" >
                  <span>环比</span>
                  <span class="trend" :class="changeRankClass(item.hb_)">{{ item.hb_value+item.hb_unit}}</span>
                </p>
              </div>
            </div>
            <div class="charbar2" v-if="showCharBar">
              <div style="height: 20px">
                <span class="operate_icon_label1"></span>
                <span class="register_icon_title">{{ operate.titleName }}</span>
              </div>
              <van-tabs class="init-tabs mgb-15" @change="handleTabClick">
                <van-tab name="operateUserC" title="整体情况" v-if="titleShow">
                  <div class="chart-wrap">
                    <BarChartScroll :data="operateUser.barData"></BarChartScroll>
                    <div class="chart-wrap__loading" v-show="operateUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="operateUserD" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="operateUser.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="operateUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </div>
          <div class="back_line" ></div>
          <!--城市换电运营情况-->
          <div class="box bg-white mgb-10" style="margin-top: 10px;">
            <div id="c" class="report-title">
              <i class="report-title__num"><span>3</span></i>
              城市换电运营情况
              <button type="button" class="helpBtn" @click="handleTipDialogShow('c')"></button>
            </div>
            <div style="border-bottom: 1px solid rgba(226,226,226,0.45); padding-bottom: 15px;margin-top: 14px;">
              <div class="operate"><span class="icon_label"></span>本日净增付费用户数-{{userArea}}</div>
              <div :style="{height:newPaymentDate.showAll == false ? '140px' : 'auto', overflow: 'hidden'}"  v-if="showList1" >
                <RankList :data="newPaymentDate.barData"></RankList>
                <van-loading size="24px" vertical v-show="newPaymentDate.loading">数据加载中...</van-loading>
              </div>
              <div class="tips" v-if="showtitle1">暂无数据</div>
              <div class="show-more" @click="newPaymentDate.showAll = !newPaymentDate.showAll" v-show="newPaymentDate.showMore" v-if="showMore">
                {{newPaymentDate.showAll == false ? '点击查看更多' : '折叠'}}
              </div>
            </div>
            <div style="border-bottom: 1px solid rgba(226,226,226,0.45); padding-bottom: 15px;margin-top: 22px;">
              <div class="operate"><span class="icon_label"></span>户均换电次数-{{userAll}}</div>
              <div :style="{height: changeTimesDate.showAll == false ? '140px' : 'auto', overflow: 'hidden'}"  v-if="showList2">
                <RankList :data="changeTimesDate.barData"></RankList>
                <van-loading size="24px" vertical v-show="changeTimesDate.loading">数据加载中...</van-loading>
              </div>
              <div class="tips" v-if="showtitle2">暂无数据</div>
              <div class="show-more" @click="changeTimesDate.showAll = !changeTimesDate.showAll" v-show="changeTimesDate.showMore" v-if="showMore">
                {{changeTimesDate.showAll == false ? '点击查看更多' : '折叠'}}
              </div>
            </div>
          </div>
          <div class="back_line" ></div>
          <!--资源资产-->
          <div class="box bg-white mgb-10" style="margin-top: 10px;">
            <div id="d" class="report-title">
              <i class="report-title__num"><span>4</span></i>
              资源资产
              <button type="button" class="helpBtn" @click="handleTipDialogShow('d')"></button>
            </div>
            <div class="resources">
              <div class="resources--box" v-for="(item, index) in resources.data" :key="index" :class="resources.active == item.idCode ? 'resources--box--current' : ''"
                   @click="handleTypeChange(4,item.idCode,item.name,item.unit)">
                <div style="float: left"><span class="resources--box__btn"></span></div>
                <span class="resources--box__title">{{item.name}}</span>
                <span class="resources--box__num" ><span style="font-weight: bolder;font-size:18px;">{{numFormat(item.value)}}</span>{{item.unit}}</span>
              </div>
            </div>
            <div class="charbar4" v-if="showCharBar">
              <div style="height: 20px">
                <span class="resources_icon_label1"></span>
                <span class="resources_icon_title">{{ resources.titleName }}</span>
              </div>
              <van-tabs class="init-tabs mgb-15" @change="handleTabClick">
                <van-tab name="resourcesUserE" title="整体情况" v-if="titleShow">
                  <div class="chart-wrap">
                    <BarChartScroll :data="resourcesUser.barData"></BarChartScroll>
                    <div class="chart-wrap__loading" v-show="resourcesUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="resourcesUserF" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="resourcesUser.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="resourcesUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </div>
          <div class="back_line" ></div>
          <!--租赁数据-->
          <div class="box bg-white mgb-10" style="margin-top: 10px;">
            <div id="e" class="report-title">
              <i class="report-title__num"><span>5</span></i>
              租赁数据
              <button type="button" class="helpBtn" @click="handleTipDialogShow('e')"></button>
            </div>
            <div class="lease">
              <div class="lease--box" v-for="(item, index) in lease.data" :key="index" :class="lease.active == item.idCode ? 'lease--box--current' : ''"
                   @click="handleTypeChange(5,item.idCode,item.name,item.unit)">
                <div style="float: left"><span class="lease--box__btn"></span></div>
                <span class="lease--box__title">{{item.name}}</span>
                <span class="lease--box__num" ><span style="font-weight: bolder;font-size:18px;">{{numFormat(item.value)}}</span>{{item.unit}}</span>
              </div>
            </div>
            <div class="charbar5" v-if="showCharBar">
              <div style="height: 20px">
                <span class="lease_icon_label1"></span>
                <span class="lease_icon_title">{{ lease.titleName }}</span>
              </div>
              <van-tabs class="init-tabs mgb-15" @change="handleTabClick">
                <van-tab name="leaseUserG" title="整体情况" v-if="titleShow">
                  <div class="chart-wrap">
                    <BarChartScroll :data="leaseUser.barData"></BarChartScroll>
                    <div class="chart-wrap__loading" v-show="leaseUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
                <van-tab name="leaseUserH" title="日变化趋势">
                  <div class="chart-wrap">
                    <LineChart :data="leaseUser.lineData"></LineChart>
                    <div class="chart-wrap__loading" v-show="leaseUser.loading">
                      <van-loading size="24px" vertical>数据加载中...</van-loading>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    目录选择-->
    <van-popup
      v-model="menus.show"
      position="left"
      :style="{height: '100%', width: '230px' }"
    >
      <div class="page-menus">
        <div class="page-menus__title">目录</div>
        <div
          class="page-menus__item"
          v-for="(item, index) in menus.list"
          :key="index"
          @click="anchorJump(item.key)">
          <i>{{index + 1}}.</i>{{item.name}}
        </div>
      </div>
    </van-popup>
    <!--    时间选择-->
    <van-popup
      v-model="datePicker.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePicker.currentDate"
        type="date"
        :min-date="datePicker.minDate"
        :max-date="datePicker.maxDate"
        @cancel="handleCanleDate"
        @confirm="handleConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <!--    省分选择-->
    <van-popup
      v-model="areaInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="areaInfo.columns"
        :defaultIndex='areaInfo.defaultIndex'
        @cancel="cancelFn('province')"
        @confirm="confirmFnProvince"
      />
    </van-popup>
    <!--    地市选择-->
    <van-popup
      v-model="cityInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="cityInfo.columns"
        :defaultIndex='cityInfo.defaultIndex'
        @cancel="cancelFn('city')"
        @confirm="confirmFnCity"
      ></van-picker>
    </van-popup>
    <!--    指标口径说明-->
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list">
            <div class="tip-dialog__item" v-for="(item, index) in tipDialog.list" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>

        </div>
      </div>
    </div>
    <div class="go-top" v-show="goTopBtn.show" @click="goTop"></div>
    <van-overlay class="page-loading" :show="pageLoading" :duration="0">
      <div class="wrapper">
        <van-loading size="34px" vertical>数据加载中...</van-loading>
      </div>
    </van-overlay>
    <WaterMark :length="16"></WaterMark>
  </div>
</template>

<script>
import Header from '@/components/Header'
import RankList from './../components/RankList'
import BarChartScroll from '@/components/BarChartScroll'
import LineChart from '@/components/LineChart'
import WaterMark from '@/components/WaterMark'
import data from './default-data-index.js'

export default {
  components:{
    WaterMark,
    Header,
    RankList,
    BarChartScroll,
    LineChart
  },
  data,
  methods: {
    //日期选择
    chooseDate() {
      this.datePicker.show = true
    },
    //取消日期设置
    handleCanleDate() {
      this.datePicker.show = false
    },
    //获得时间域
    getMaxMinMonth() {
      function dateSplit(param) {
        let paramStr = param + ''
        let dateStr = paramStr.replace(/(.{2})/g,'$1,')
        let dateArr = dateStr.substr(0, dateStr.length - 1).split(',')
        return dateArr
      }
      let params = {
        type:'day',
        process_name:'MKT_SUM_MOA_HOMEPAGE_DAY',
        partion_id:75
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/moaVisit/getMaxTime', params).then(data => {
          let max_time=data.STAT_DATE
          let max = max_time.substring(0, 4) + max_time.substring(5, 7) + max_time.substring(8);
          let min = 20211220

          let maxYear = dateSplit(max)[0] + dateSplit(max)[1]
          let maxMonth = dateSplit(max)[2]
          let maxDay= dateSplit(max)[3]
          let minYear = dateSplit(min)[0] + dateSplit(min)[1]
          let minMonth = dateSplit(min)[2]
          let minDay= dateSplit(min)[3]
          let actualMaxMonth = parseInt(maxMonth) - 1
          let actualMinMonth = parseInt(minMonth) - 1
          let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
          let showMaxDay = maxDay[0] == '0' ? maxDay[1] : maxDay

          this.datePicker.currentDate = new Date(maxYear, actualMaxMonth, maxDay)
          this.datePicker.minDate = new Date(minYear, actualMinMonth, minDay)
          this.datePicker.maxDate = new Date(maxYear, actualMaxMonth, maxDay)

          this.datePicker.showData = maxYear + '/' + showMaxMonth + '/' + showMaxDay
          this.showDate = maxYear + '年' + showMaxMonth + '月' + showMaxDay+ '日'
          this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay

          let formCharge = sessionStorage.getItem('formCharge')
          if (formCharge != null && formCharge != undefined) {
            let selectDate = JSON.parse(formCharge).selectDate
            if (selectDate != "") {
              let paramsYear = dateSplit(selectDate)[0] + dateSplit(selectDate)[1]
              let paramsMonth = dateSplit(selectDate)[2]
              let paramsDay= dateSplit(selectDate)[3]
              let showParamsMonth = paramsMonth[0] == '0' ? paramsMonth[1] : paramsMonth
              let showParamsDay = paramsDay[0] == '0' ? paramsDay[1] : paramsDay
              let actualParamsMonth = parseInt(paramsMonth) - 1

              this.datePicker.currentDate = new Date(paramsYear, actualParamsMonth, paramsDay)
              this.datePicker.showData = paramsYear + '/' + showParamsMonth + '/' + showParamsDay
              this.showDate = paramsYear + '年' + showParamsMonth + '月' + showParamsDay+ '日'
              this.datePicker.selectDate = selectDate
            } else {
              this.datePicker.showData = maxYear + '/' + showMaxMonth + '/' + showMaxDay
              this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay
              this.showDate = maxYear + '年' + showMaxMonth + '月' + showMaxDay+ '日'
            }
          } else {
            this.datePicker.showData = maxYear + '/' + showMaxMonth + '/' + showMaxDay
            this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay
            this.showDate = maxYear + '年' + showMaxMonth + '月' + showMaxDay+ '日'
          }
          resolve("ok")
        })
      })
    },
    //选择日期
    handleConfirmDate(value) {
      this.handleCanleDate()
      let date = new Date(value)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let month1 = month < 10 ? '0' + month : month
      let day1 = day < 10 ? '0' + day : day
      this.datePicker.showData = year + '/' + month + '/' + day
      this.showDate = year + '年' + month + '月' + day+ '日'
      this.datePicker.selectDate = year + '' + month1 + '' + day1
      this.initPage()
    },
    //省分/地市选择
    getAreaInfo() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId
      }

      this.$http
        .post("api/yearCheckIndex/getKpiAreaInfo", params)
        .then(data => {
          //获取省会
          if (data.rows.length > 1) {
            this.areaInfo.columns = []
            data.rows.forEach(item => {
              this.areaInfo.columns.push({
                text: item.area,
                id: item.areaId
              })
            })
            this.areaInfo.columns.unshift({ text: "全国", id: "100000" })
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.showArea = '全国'
          }
          //获取地市
          if (data.rows2.length > 1) {
            this.cityInfo.columns = []
            data.rows2.forEach(item => {
              this.cityInfo.columns.push({
                text: item.area,
                id: item.areaId
              });
            });
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.selectId = data.rows[0].areaId
            this.areaInfo.showArea = data.rows[0].area

            if (this.role == "province") {
              this.areaInfo.columns.push(
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              )
              this.areaInfo.defaultIndex = 1
            }
          } else if (data.rows2.length == 1 ) {
            if (this.role == "city") {
              this.areaInfo.selectId = data.rows[0].areaId
              this.areaInfo.showArea = data.rows[0].area
              this.areaInfo.columns = [
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              ]
              this.cityInfo.selectId = data.rows2[0].areaId
              this.cityInfo.showArea = data.rows2[0].area
              this.cityInfo.defaultIndex = 1
              this.cityInfo.columns = [
                {
                  text: data.rows2[0].area,
                  id: data.rows2[0].areaId
                }
              ]
            }

          }
        });

    },
    //显示地市弹框
    chooseCity(area) {
      if (area == 'province') {
        this.areaInfo.show = true
      } else if (area == 'city') {
        this.cityInfo.show = true
      }
    },
    //取消地市弹框
    cancelFn(area) {
      if (area == 'province') {
        this.areaInfo.show = false
      } else if (area == 'city') {
        this.cityInfo.show = false
      }
    },
    //确认省分
    confirmFnProvince(item, index) {
      if (this.areaInfo.selectId != item.id) {
        this.areaInfo.selectId = item.id
        this.areaId = item.id
        this.areaInfo.showArea = item.text
        this.cityInfo.columns = []
        this.cityInfo.showArea = '地市'
        if (this.role == 'province') {
          if (this.areaId != '100000') {
            this.areaInfo.columns = []
            this.getAreaInfo()
          } else {
            this.cityInfo.columns = [{text: '地市', id: '0'}]
          }
        } else {
          this.getAreaInfo()

        }
        this.initPage()
      }
      if (this.areaId == '100000'){
        this.titleShow=true
        this.showMore=true
        this.roleType = 'all'
        this.userArea = '全国地市排名情况TOP10'
        this.userAll='全国地市排名情况TOP10'
      }else{
        this.titleShow=true
        this.showMore=true
        this.roleType = 'all'
        this.userArea = '省内地市全国排名情况'
        this.userAll = '省内地市全国排名情况'
      }
      this.areaInfo.show = false
      this.showCharBar=true
      this.changeTimesDate.showMore = false
    },
    //确认地市
    confirmFnCity(item, index) {
      if (this.cityInfo.selectId != item.id) {
        this.cityInfo.selectId = item.id
        this.cityInfo.showArea = item.text
        if (this.cityInfo.selectId != '' && this.cityInfo.selectId != 0) {
          this.areaId = item.id
        } else {
          this.areaId = this.areaInfo.selectId
        }
        this.initPage()
      }
      if(this.cityInfo.showArea=='地市'){
        this.userArea = '省内地市全国排名情况'
        this.userAll = '省内地市全国排名情况'
        this.showCharBar=true
        this.titleShow=true
        this.showMore=true
        this.roleType = 'all'
      }else {
        this.userArea = '本地市全国排名情况'
        this.userAll = '本地市全国排名情况'
        this.showCharBar=true
        this.titleShow=false
        this.showMore=false
        this.roleType = 'province'
      }
      this.cityInfo.show = false
      this.changeTimesDate.showMore = false

    },
    //切换
    handleTypeChange(index,code,name,unit) {
     if(index==1){
       if (this.register.active != code) {
         this.register.active = code
         this.register.titleName=name
         this.getRegisterCharData()
         this.getRegisterLineData()
       }
     }else if(index==2){
       if (this.operate.active != code) {
         this.operate.active = code
         this.operate.titleName=name
         this.operateUser.barData.unit=unit
         this.operateUser.lineData.unit=unit
         this.getOperateCharData()
         this.getOperateLineData()
       }
     }else if(index==4){
       if (this.resources.active != code) {
         this.resources.active = code
         this.resources.titleName=name
         this.resourcesUser.barData.unit=unit
         this.resourcesUser.lineData.unit=unit
         this.getResourcesCharData()
         this.getResourcesLineData()
       }
     }else if(index==5){
       if (this.lease.active != code) {
         this.lease.active = code
         this.lease.titleName=name
         this.leaseUser.barData.unit=unit
         this.leaseUser.lineData.unit=unit
         this.getLeaseCharData()
         this.getLeaseLineData()
       }
     }else{}
    },

    //用户发展
    getRegisterData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:1
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryKpiCardData', params).then(res => {
          let data = res
          data.list1.forEach((item, index) => {
            this.register.data[index].value=item.VALUE
          })
          data.list2.forEach((item, index) => {
            this.register.dayData[index].value=item.VALUE
          })
          data.list3.forEach((item, index) => {
            this.register.monData[index].value=item.VALUE
          })
          data.list4.forEach((item, index) => {
            this.register.yearData[index].value=item.VALUE
          })
          resolve('ok')
        })
      })
    },
    getRegisterCharData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:1,
        dimCode:this.register.active
      }
      this.registerUser.loading = true
      this.registerUser.barData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryOverall', params).then(res => {
          let barData = res.list
          barData.forEach(item => {
            this.registerUser.barData.data.push({
              date: item.AREA_NAME,
              value: item.VALUE
            })
          })
          this.registerUser.loading = false
          resolve('ok')
        })
      })
    },
    getRegisterLineData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:1,
        dimCode:this.register.active
      }
      this.registerUser.loading = true
      this.registerUser.lineData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryDailyChange', params).then(res => {
          let lineData = res.list
          lineData.forEach(item => {
            this.registerUser.lineData.data.push({
              date: item.STAT_TIME,
              value: item.VALUE
            })
          })
          this.registerUser.loading = false
          resolve('ok')
        })
      })
    },
    //运营效率
    getOperateData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:2
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryKpiCardData', params).then(res => {
          let data = res
          data.list.forEach((item, index) => {
            this.operate.data[index].value=item.VALUE
            this.operate.data[index].hb_value=item.HB_VAL
            this.operate.data[index].hb_=item.HB_
          })
          resolve('ok')
        })
      })
    },
    getOperateCharData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:2,
        dimCode:this.operate.active
      }
      this.operateUser.loading = true
      this.operateUser.barData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryOverall', params).then(res => {
          let barData = res.list
          barData.forEach(item => {
            this.operateUser.barData.data.push({
              date: item.AREA_NAME,
              value: item.VALUE
            })
          })
          this.operateUser.loading = false
          resolve('ok')
        })
      })

    },
    getOperateLineData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:2,
        dimCode:this.operate.active
      }
      this.operateUser.loading = true
      this.operateUser.lineData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryDailyChange', params).then(res => {
          let lineData = res.list
          lineData.forEach(item => {
            this.operateUser.lineData.data.push({
              date: item.STAT_TIME,
              value: item.VALUE
            })
          })
          this.operateUser.loading = false
          resolve('ok')
        })
      })
    },

    // 城市换电运营情况
    //本日净增付费用户-排序
    getPaymentData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:3,
        moduleId:1
      }
      this.newPaymentDate.loading = true
      this.newPaymentDate.barData.data = []
      if(this.areaType==2){
        var url='/api/energyExchangeDailyNew/qryRankTop3'
      }else{
        var url='/api/energyExchangeDailyNew/qryRankAll'
      }
      return new Promise((resolve, reject) => {
        this.$http.post(url, params).then(data => {
          this.newPaymentDate.barData.role = this.roleType
          let topTileList = data.list
          let len = topTileList.length
          if (len == 0) {
            this.showList1 = false
            this.showtitle1 = true
            this.newPaymentDate.showMore = false
          } else {
            topTileList.forEach(item => {
              if (item.CITY_CD == params.areaId) {
                this.newPaymentDate.barData.data.push({
                  name: item.AREA_NAME,
                  value: item.VALUE,
                  count: item.RANK,
                  current: true
                })
              } else {
                this.newPaymentDate.barData.data.push({
                  name: item.AREA_NAME,
                  value: item.VALUE,
                  count: item.RANK,
                  current: false
                })
              }

            })
            this.showList1 = true
            this.showtitle1 = false
            this.newPaymentDate.showMore = true
            this.newPaymentDate.loading = false
          }
          resolve('ok')
        })
      })
    },
    //本日换电次数-排序
    getTimesData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:3,
        moduleId:2
      }
      this.changeTimesDate.loading = true
      this.changeTimesDate.barData.data = []
      if(this.areaType==2){
        var url='/api/energyExchangeDailyNew/qryRankTop3'
      }else{
        var url='/api/energyExchangeDailyNew/qryRankAll'
      }
      return new Promise((resolve, reject) => {
        this.$http.post(url, params).then(data => {
          this.changeTimesDate.barData.role = this.roleType
          let topTileList = data.list
          let len = topTileList.length
          if (len == 0) {
            this.showList2 = false
            this.showtitle2 = true
            this.changeTimesDate.showMore = false
          } else {
            this.showList2 = true
            this.showtitle2 = false
            topTileList.forEach(item => {
              if (item.CITY_CD == params.areaId) {
                this.changeTimesDate.barData.data.push({
                  name: item.AREA_NAME,
                  value: item.VALUE,
                  count: item.RANK,
                  current: true
                })
              } else {
                this.changeTimesDate.barData.data.push({
                  name: item.AREA_NAME,
                  value: item.VALUE,
                  count: item.RANK,
                  current: false
                })
              }
            })
            this.changeTimesDate.showMore = true
            this.changeTimesDate.loading = false
          }
          resolve('ok')
        })
      })
    },

    //资源资产
    getResourcesData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:4
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryKpiCardData', params).then(res => {
          let data = res
          data.list.forEach((item, index) => {
            this.resources.data[index].value=item.VALUE
          })
          resolve('ok')
        })
      })
    },
    getResourcesCharData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:4,
        dimCode:this.resources.active
      }
      this.resourcesUser.loading = true
      this.resourcesUser.barData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryOverall', params).then(res => {
          let barData = res.list
          barData.forEach(item => {
            this.resourcesUser.barData.data.push({
              date: item.AREA_NAME,
              value: item.VALUE
            })
          })
          this.resourcesUser.loading = false
          resolve('ok')
        })
      })

    },
    getResourcesLineData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:4,
        dimCode:this.resources.active
      }
      this.resourcesUser.loading = true
      this.resourcesUser.lineData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryDailyChange', params).then(res => {
          let lineData = res.list
          lineData.forEach(item => {
            this.resourcesUser.lineData.data.push({
              date: item.STAT_TIME,
              value: item.VALUE
            })
          })
          this.resourcesUser.loading = false
          resolve('ok')
        })
      })
    },

    // 租赁数据
    getLeaseData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:5
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryKpiCardData', params).then(res => {
          let data = res
          data.list.forEach((item, index) => {
            this.lease.data[index].value=item.VALUE
          })
          resolve('ok')
        })
      })
    },
    getLeaseCharData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:5,
        dimCode:this.lease.active
      }
      this.leaseUser.loading = true
      this.leaseUser.barData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryOverall', params).then(res => {
          let barData = res.list
          barData.forEach(item => {
            this.leaseUser.barData.data.push({
              date: item.AREA_NAME,
              value: item.VALUE
            })
          })
          this.leaseUser.loading = false
          resolve('ok')
        })
      })
    },
    getLeaseLineData(){
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        areaType: this.areaType,
        levelId:5,
        dimCode:this.lease.active
      }
      this.leaseUser.loading = true
      this.leaseUser.lineData.data = []
      return new Promise((resolve, reject) => {
        this.$http.post('/api/energyExchangeDailyNew/qryDailyChange', params).then(res => {
          let lineData = res.list
          lineData.forEach(item => {
            this.leaseUser.lineData.data.push({
              date: item.STAT_TIME,
              value: item.VALUE
            })
          })
          this.leaseUser.loading = false
          resolve('ok')
        })
      })
    },

    //tab切换重绘echarts图
    handleTabClick(name, title) {
      if (name == 'registerUserA') {
        let data = JSON.parse(JSON.stringify(this.registerUser.barData.data))
        this.registerUser.barData.data = []
        this.registerUser.barData.data = JSON.parse(JSON.stringify(data))
      }else if (name == 'registerUserB') {
        let data = JSON.parse(JSON.stringify(this.registerUser.lineData.data))
        this.registerUser.lineData.data = []
        this.registerUser.lineData.data = JSON.parse(JSON.stringify(data))
      }else if (name == 'operateUserC') {
        let data = JSON.parse(JSON.stringify(this.operateUser.barData.data))
        this.operateUser.barData.data = []
        this.operateUser.barData.data = JSON.parse(JSON.stringify(data))
      }else if (name == 'operateUserD') {
        let data = JSON.parse(JSON.stringify(this.operateUser.lineData.data))
        this.operateUser.lineData.data = []
        this.operateUser.lineData.data = JSON.parse(JSON.stringify(data))
      }else if (name == 'resourcesUserE') {
        let data = JSON.parse(JSON.stringify(this.resourcesUser.barData.data))
        this.resourcesUser.barData.data = []
        this.resourcesUser.barData.data = JSON.parse(JSON.stringify(data))
      }else if (name == 'resourcesUserF') {
        let data = JSON.parse(JSON.stringify(this.resourcesUser.lineData.data))
        this.resourcesUser.lineData.data = []
        this.resourcesUser.lineData.data = JSON.parse(JSON.stringify(data))
      }else if (name == 'leaseUserG') {
        let data = JSON.parse(JSON.stringify(this.leaseUser.barData.data))
        this.leaseUser.barData.data = []
        this.leaseUser.barData.data = JSON.parse(JSON.stringify(data))
      }else if (name == 'leaseUserH') {
        let data = JSON.parse(JSON.stringify(this.leaseUser.lineData.data))
        this.leaseUser.lineData.data = []
        this.leaseUser.lineData.data = JSON.parse(JSON.stringify(data))
      }else{}
    },
    //报表跳转
    jump(){
      this.$router.push({
        path:'/ReportFormDetailFormNew',
        query:{
          selectDate:parseInt(this.datePicker.selectDate),
        }
      })
    },
    //目录锚点定位
    anchorJump(anchor) {
      let anchorEle = document.querySelector('#' + anchor)
      if (!!anchorEle) {
        anchorEle.scrollIntoView(true)
        let scrollTop = this.$refs.main.scrollTop
        this.$refs.main.scrollTop = scrollTop - 36
      }
      this.menus.show = false
    },
    //返回顶部
    goTop() {
      let headTitle = document.querySelector('#headTitle')
      headTitle.scrollIntoView(true)
    },
    //滚动显示返回顶部按钮
    handleScroll() {
      let scrollTop = this.$refs.main.scrollTop
      if (scrollTop >100) {
        this.goTopBtn.show = true
      } else {
        this.goTopBtn.show = false
      }
    },
    //指标口径说明
    handleTipDialogShow(type) {
      this.tipDialog.show = true
      this.tipDialog.list = this.tipDialog[type].list
    },
    //环比
    changeRankClass(value) {
      if (value > 0) {
        return 'trend--asc'
      } else if (value < 0) {
        return 'trend--desc'
      } else {
        return 'trend--zero'
      }
    },
    //记录日志
    recordLogs() {
      let params = {
        userId: this.userInfo.user_id,
        verify_code: this.userInfo.verify_code,
        priv_id: '10102339',
      }

      this.$http.post("api/new/insertLogs", params).then(res => {})
    },
    //数字初始化
    numFormat(num) {
      return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
    },
    //页面初始化
    initPage() {
      this.pageLoading = true
      if (this.areaId == '100000'){
        this.areaType = 0;
        this.titleShow=true
        this.showMore=true
        this.roleType = 'all'
        this.userArea = '全国地市排名情况TOP10'
        this.userAll='全国地市排名情况TOP10'
      }else{
        if(this.areaId.substr(2)=='0000'){
          this.areaType = 1;
          this.titleShow=true
          this.roleType = 'all'
          this.userArea = '省内地市全国排名情况'
          this.userAll = '省内地市全国排名情况'
        }else{
          this.areaType = 2;
          this.titleShow=false
          this.roleType = 'province'
          this.userArea = '本地市全国排名情况'
          this.userAll = '本地市全国排名情况'

        }
        this.showMore=true
      }
      Promise.all([
        //用户发展
        this.getRegisterData(),
        this.getRegisterCharData(),
        this.getRegisterLineData(),
        //运营效率
        this.getOperateData(),
        this. getOperateCharData(),
        this.getOperateLineData(),
        // 城市换电运营情况
        this.getPaymentData(),
        this.getTimesData(),
        //资源资产
        this.getResourcesData(),
        this.getResourcesCharData(),
        this.getResourcesLineData(),
        //租赁数据
        this.getLeaseData(),
        this.getLeaseCharData(),
        this.getLeaseLineData()
      ]).then(values => {
        this.pageLoading = false
      })
    },
  },
  mounted() {
    this.$refs.main.addEventListener('scroll', this.handleScroll)
    this.getAreaInfo()
    this.getMaxMinMonth().then(res => {
      if (res == 'ok') {
        this.initPage()
      }
    })
  },
  created() {
    this.recordLogs()
  },
  beforeRouteLeave (to, from, next) {
    if (to.name != 'ReportFormDetailForm') {
      sessionStorage.removeItem('formCharge')
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
.back_line{
  height: 10px;
  background: #F4F4F4;

}
.jump{
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 1;
  color: #666666;
  cursor: pointer;
  font-size: 14px;
  .jump__icon{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 2px;
    background-image: url(~@/assets/images/icon-jump.png);
  }
}
.register_icon_label1{
  display: inline-block;
  width: 20px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
  background-image: url(~@/assets/images/refortForm/icon-user.png);
}
.register_icon_title{
  display: inline-block;
  position: relative;
  top: -3px;
  font-weight: bold;
}
.register--box--current{
  color: #DE1F37;
}
.operate_icon_label1{
  display: inline-block;
  width: 12px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 3px;
  background-image: url(~@/assets/images/refortForm/icon-title2.png);
}
.resources_icon_label1{
  display: inline-block;
  width: 18px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
  background-image: url(~@/assets/images/refortForm/icon-title4.png);
}
.resources_icon_title{
  display: inline-block;
  position: relative;
  top: -3px;
  font-weight: bold;
}
.resources--box--current{
  color: #DE1F37;
}

.lease_icon_label1{
  display: inline-block;
  width: 18px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
  background-image: url(~@/assets/images/refortForm/icon-title4.png);
}
.lease_icon_title{
  display: inline-block;
  position: relative;
  top: -3px;
  font-weight: bold;
}
.lease--box--current{
  color: #DE1F37;
}
.icon_label{
  display: inline-block;
  width: 12px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
  background-image: url(~@/assets/images/icon-label.png);
}
.icon_label1{
  display: inline-block;
  width: 12px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
  background-image: url(~@/assets/images/icon-label1.png);
}
.report-form {
  background-color: #fff;
  .title-bg {
    line-height: 3;
    padding-top: 18px;
    box-sizing: border-box;
    font-size: 18px;
  }
}
.top-menu {
  float: left;
  flex: 1;
  overflow: hidden;
  padding:7px 0px 7px 10px;

  &__menu {
    float: left;
    background: #FF4B47;
    line-height: 26px;
    padding: 0 26px 0 10px;
    color: #fff;
    border-radius: 4px;
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 10px;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    &::before {
      height: 8px;
      border-top: 1px solid;
      border-bottom: 1px solid;
    }

    &::after {
      height: 1px;
      background: #fff;
    }
  }

  &__picker {
    float: right;
    line-height: 26px;
    padding: 0 26px 0 10px;
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-right: 1px solid #666;
      border-bottom: 1px solid #666;
      right: 10px;
    }

    &::before {
      transform: translateY(4px) rotate(45deg);
    }

    &::after {
      transform: translateY(10px) rotate(45deg);
    }
  }
}
.pd-aside{
  flex: 1;
}
.selects{
  margin-bottom: 0;
}
.page-menus {
  padding: 30px 15px 0 15px;

  &__title {
    font-size: 16px;
    color: #FF4B47;
    margin-bottom: 20px;
  }

  &__item {
    font-size: 15px;
    margin-bottom: 20px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
      right: 0;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }
}
.report-title {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
  &__num {
    font-size: 24px;
    color: #FE786D;
    margin-right: 5px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 5px;
      background: #FEC7C6;
      left: 50%;
      margin-left: -10px;
      bottom: 5px;
    }

    span {
      position: relative;
    }
  }

  &-sub {
    font-size: 16px;
  }
}
.register{
  box-shadow: 0 0 6px 3px rgba(226,226,226,0.45);
  border-radius: 2px;
  overflow: hidden;
  padding: 0 12px;
  .register--box {
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    margin-top: -2px;
    padding: 18px 0;
    text-align: center;
    padding-right: 5px;
    &:nth-child(1) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/icon-user2.png);
      }
      .register--box__title{
        margin-top: 5px;
      }
    }
    &:nth-child(2) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/icon-user1.png);
      }
      .register--box__title{
        margin-top: 5px;
      }
    }

    &__title {
      display: inline-block;
      flex: 1;
      padding: 0px 5px;
      margin-left: 5px;
      text-align: left;
    }
    &__num {
      display: inline-block;
      font-size: 12px;
      padding: 2px 5px;
    }

    &__btn {
      display: inline-block;
      margin-left: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

  }
  .register--daybox {
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    margin-top: -2px;
    padding: 18px 0;
    text-align: center;
    padding-right: 5px;
    &:nth-child(1) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-userDay2.png);
      }
      .register--box__title{
        margin-top: 5px;
      }
    }
    &:nth-child(2) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-userDay1.png);
      }
      .register--box__title{
        margin-top: 5px;
      }
    }
    &:nth-child(3) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-userDay3.png);
      }
    }

    &__title {
      display: inline-block;
      flex: 1;
      padding: 0px 5px;
      margin-left: 5px;
      text-align: left;
    }
    &__num {
      display: inline-block;
      font-size: 12px;
      padding: 2px 5px;
    }

    &__btn {
      display: inline-block;
      margin-left: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

  }
  .register--monbox {
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    margin-top: -2px;
    padding: 18px 0;
    text-align: center;
    padding-right: 5px;
    &:nth-child(1) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/icon-user2.png);
      }
      .register--box__title{
        margin-top: 5px;
      }
    }
    &:nth-child(2) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/icon-user1.png);
      }
      .register--box__title{
        margin-top: 5px;
      }
    }
    &:nth-child(3) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-userMonth3.png);
      }
    }

    &__title {
      display: inline-block;
      flex: 1;
      padding: 0px 5px;
      margin-left: 5px;
      text-align: left;
    }
    &__num {
      display: inline-block;
      font-size: 12px;
      padding: 2px 5px;
    }

    &__btn {
      display: inline-block;
      margin-left: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

  }
  .register--yearbox {
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    margin-top: -2px;
    padding: 18px 0;
    text-align: center;
    padding-right: 5px;
    &:nth-child(1) {
      .register--box__btn{
        width: 28px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-userYear.png);
      }
      .register--box__title{
        margin-top: 5px;
      }
    }

    &__title {
      display: inline-block;
      flex: 1;
      padding: 0px 5px;
      margin-left: 5px;
      text-align: left;
    }
    &__num {
      display: inline-block;
      font-size: 12px;
      padding: 2px 5px;
    }

    &__btn {
      display: inline-block;
      margin-left: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

  }

}
.operate {
  border-radius: 2px;
  overflow: hidden;
  padding-bottom: 5px;
  .operate--box--current{
    border:1px solid #DE1F37!important;
  }
  .operate--box {
    float: left;
    box-sizing: border-box;
    height: 100px;
    width: 48%;
    border:1px solid #e5e5e5;
    padding: 5px 0px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0px 7px 7px -8px #5E5E5E;
    &:nth-child(2n){
      margin-bottom: 18px;
    }
    &:nth-child(2n+1){
      margin-bottom: 18px;
      margin-right: 4%;
    }
    &__title {
      line-height: 0;
    }
    &__num{
      span{
        font-size: 18px!important;
        font-weight: bolder;
      }
      line-height: 1.5;
      font-size: 12px;
    }
    &__hb{
      font-size: 12px;
    }
  }

}
.resources{
  box-shadow: 0 0 6px 3px rgba(226,226,226,0.45);
  border-radius: 2px;
  overflow: hidden;
  padding: 0 12px;
  .resources--box {
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    margin-top: -2px;
    padding: 20px 0;
    text-align: center;
    padding-right: 5px;
    &:nth-child(1) {
      .resources--box__btn{
        width: 24px;
        height: 22px;
        background-image: url(~@/assets/images/refortForm/icon-charge1.png);
      }
    }
    &:nth-child(2) {
      .resources--box__btn{
        width: 20px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-charge2.png);
      }
    }
    &:nth-child(3) {
      .resources--box__btn{
        width: 22px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-charge3.png);
      }
    }
    &:nth-child(4) {
      .resources--box__btn{
        width: 24px;
        height: 24px;
        background-image: url(~@/assets/images/refortForm/icon-charge4.png);
      }
    }
    &:nth-child(5) {
      .resources--box__btn{
        width: 20px;
        height: 26px;
        background-image: url(~@/assets/images/refortForm/icon-charge5.png);
      }
    }
    &:nth-child(6) {
      .resources--box__btn{
        width: 22px;
        height: 24px;
        background-image: url(~@/assets/images/refortForm/icon-charge6.png);
      }
    }

    &__title {
      display: inline-block;
      flex: 1;
      padding: 3px 5px;
      margin-left: 5px;
      text-align: left;
    }
    &__num {
      display: inline-block;
      font-size: 12px;
      padding: 2px 5px;
    }

    &__btn{
      display: inline-block;
      margin-left: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

  }
}
.lease{
  box-shadow: 0 0 6px 3px rgba(226,226,226,0.45);
  border-radius: 2px;
  overflow: hidden;
  padding: 0 12px;
  .lease--box {
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    margin-top: -2px;
    padding: 18px 0;
    text-align: center;
    padding-right: 5px;
    &:nth-child(1) {
      .lease--box__btn{
        width: 23px;
        height: 24px;
        background-image: url(~@/assets/images/refortForm/icon-lease1.png);
      }
    }
    &:nth-child(2) {
      .lease--box__btn{
        width: 20px;
        height: 24px;
        background-image: url(~@/assets/images/refortForm/icon-lease2.png);
      }
    }
    &__title {
      display: inline-block;
      flex: 1;
      padding: 0px 5px;
      margin-left: 5px;
      margin-top: 5px;
      text-align: left;
    }
    &__num {
      display: inline-block;
      font-size: 12px;
      padding: 2px 5px;
    }
    &__btn {
      display: inline-block;
      margin-left: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
.operate {
  font-size: 14px
}
.chart-wrap {
  height: 200px;
  position: relative;

  &__loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 80px;
    background: #fff;
  }
}
.helpBtn {
  width: 20px;
  height: 20px;
  background: url(~@/assets/images/icon-help.png) no-repeat center;
  background-size: 80% 80%;
  border: 0;
  outline: none;
  padding: 0;
  vertical-align: text-bottom;
}
.go-top {
  position: fixed;
  bottom: 60px;
  right: 15px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  background: #FF4B47;

  &::before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    background: url(~@/assets/images/icon-up.png) no-repeat center center;
    background-size: 70% 70%;
  }
}
.show-more{
  font-size: 12px;
}
.charbar1,.charbar4,.charbar5{
  margin-top: 20px;
}
.tips{
  padding:50px;
  text-align: center;
  font-size: 16px
}
.page-loading {
  z-index: 100!important;

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
/deep/ .bg-white{
  background: none;
}
/deep/.selects{
  border:none;
  padding: 3px 0px;
}

/deep/.selects>.selects__item:nth-child(1)::after{
  right: 5px;
}
/deep/.pd-aside{
  padding:0;
}
.box{
  padding:0px 12px;
}
/deep/.rank__head-unit{
  font-size: 12px!important;
}
/deep/ .rank__num{
  width: 32px!important;
  height: 28px!important;
  line-height: 28px!important;
  left:-5% !important;
  top: 50% !important;
}
</style>
